<template>
  <div class="c-box">
    <div class="jump">
      <router-link
        :to="{ name: 'CommunityTwoTask' }"
        :class="{ active: status.curType == 1 }"
        @click.native="changeType(1)"
        >作业</router-link
      >
      <router-link
        :to="{ name: 'CommunityTwoAnswers' }"
        :class="{ active: status.curType == 2 }"
        @click.native="changeType(2)"
        >问答</router-link
      >
      <router-link
        :to="{ name: 'CommunityTwoDynamic' }"
        :class="{ active: status.curType == 3 }"
        @click.native="changeType(3)"
        >动态</router-link
      >
      <router-link
        :to="{ name: 'CommunityTwoDraw' }"
        :class="{ active: status.curType == 4 }"
        @click.native="changeType(4)"
        >指绘</router-link
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { reactive } from "vue";

let status = reactive({
  curType: 1,
});

let changeType = (id) => {
  // console.log(id);
  status.curType = id;
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.active {
  color: #089fee !important;
  position: relative;
  &::after {
    content: "";
    width: 100%;
    height: 3px;
    background-color: #089fee;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translate(-50%);
  }
}
.c-box {
  .jump {
    height: 42px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #eee;
    a {
      color: #a5a5a5;
    }
  }
}
</style>
